<div class="apes-login">
  <form apes-form [formGroup]="form" (ngSubmit)="login()" role="form">
    <apes-tabset [apesAnimated]="false" [apesShowPagination]="false" class="tabs" (apesSelectChange)="switch($event)">
      <apes-tab apesTitle="账户密码登录">
        <apes-alert *ngIf="error" [apesType]="'error'" [apesMessage]="error" [apesShowIcon]="true"
                    class="mb-lg"></apes-alert>
        <apes-form-item>
          <apes-form-control>
            <apes-input-group  [apesPrefix]="prefixTemplate"   apesSize="large" >
              <input apes-input formControlName="userName" placeholder="admin" (keyup.enter)="_onUsernameBlur()"
                     (blur)="_onUsernameBlur()" autofocus>
            </apes-input-group>
            <ng-template #prefixTemplate><i apes-icon apesType="user"></i></ng-template>
            <apes-form-explain *ngIf="userName.dirty && userName.errors">请输入账户名且至少五个字符！</apes-form-explain>
          </apes-form-control>
        </apes-form-item>
        <apes-form-item>
          <apes-form-control>
            <apes-input-group  apesSize="large"  [apesPrefix]="prefixTemplatePass">
              <input apes-input  type="password"  formControlName="password" placeholder="请输入密码" (keyup.enter)="login()">
            </apes-input-group>
            <ng-template #prefixTemplatePass>
              <i apes-icon apesType="lock"></i>
            </ng-template>
            <apes-form-explain *ngIf="password.dirty && password.errors">
              请输入密码！
            </apes-form-explain>
          </apes-form-control>
        </apes-form-item>
        <apes-form-item>
          <apes-form-control [apesValidateStatus]="post">
            <select class="apes-input-lg apes-input" formControlName="post" (change)="select($event.target)">
              <option value="" [selected]="!postList">请选择岗位</option>
              <option *ngFor="let post of postList;index as i" [value]="post">{{post.name}}</option>
            </select>
            <apes-form-explain *ngIf="(post.dirty || post.touched) && post.errors?.required">请选择岗位！</apes-form-explain>
          </apes-form-control>
        </apes-form-item>
      </apes-tab>
      <!--<apes-tab apesTitle="手机号登录">-->
      <!--<apes-form-item>-->
      <!--<apes-form-control>-->
      <!--<apes-input-group size="large" prefixIcon="anticon anticon-user">-->
      <!--<input apes-input formControlName="mobile" placeholder="手机号">-->
      <!--</apes-input-group>-->
      <!--<apes-form-explain *ngIf="mobile.dirty && mobile.errors">请输入手机号且至少五个字符！</apes-form-explain>-->
      <!--</apes-form-control>-->
      <!--</apes-form-item>-->
      <!--<apes-form-item>-->
      <!--<apes-form-control>-->
      <!--<apes-row [apesGutter]="8">-->
      <!--<apes-col [apesSpan]="16">-->
      <!--<apes-input-group size="large" prefixIcon="anticon anticon-mail">-->
      <!--<input apes-input formControlName="captcha" placeholder="验证码">-->
      <!--</apes-input-group>-->
      <!--<apes-form-explain *ngIf="mobile.dirty && mobile.errors">-->
      <!--请输入验证码！-->
      <!--</apes-form-explain>-->
      <!--</apes-col>-->
      <!--<apes-col [apesSpan]="8">-->
      <!--<button apes-button apesSize="large" (click)="getCaptcha()" [disabled]="count" class="apes-btn__block">{{ count ? count + 's' : '获取验证码' }}</button>-->
      <!--</apes-col>-->
      <!--</apes-row>-->
      <!--</apes-form-control>-->
      <!--</apes-form-item>-->
      <!--</apes-tab>-->
    </apes-tabset>
    <!--<apes-form-item>-->
      <!--<apes-col [apesSpan]="12">-->
        <!--<label apes-checkbox formControlName="remember" class="login-auto">自动登录</label>-->
      <!--</apes-col>-->
      <!--<apes-col [apesSpan]="12" class="text-right">-->
        <!--<a class="login-forget" (click)="msg.error('正在努力开发中...')">忘记密码？</a>-->
      <!--</apes-col>-->
    <!--</apes-form-item>-->
    <apes-form-item>
      <button apes-button apesType="primary" apesSize="large" [apesLoading]="loading" class="apes-btn__block">登录
      </button>
    </apes-form-item>
  </form>
</div>
